<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS变量var的使用</title>
    <style>
        /* 定义调用  
        css变量符号  --变量名称（自己定义的）  var(--名称)
        全局变量 :root
        局部变量  p{ 定义 }
        
        参数 - 2个参数，第2个备用参数
        参数 - 缺省性（属性名 和 属性值 不匹配） 第2个失效   走的其实是元素天生默认自带样式
        
        定义变量值: 数值 - 带单位(不要加引号)  - 不带单位(不用后面直接写px单位，后面其实有一个空格，用calc())
        calc(20 * 1px) 

        变量符号:  
        原生css变量:  --
        less变量      @
        sass变量      $
        */
        :root{
            /* --bg:red; */
        }
        p{
            --border:1px solid #000;
            color:var(--bg);
            border:var(--border);
        }
        div{
            color:var(--bg,green)
        }
        span{
            /* color:20px  20 px*/
            --txt:20;
            width:calc(var(--txt) * 1px);
        }
    </style>
</head>

<body>
    <p>珠峰培训</p>
    <div>珠峰培训</div>
    <span>珠峰培训22</span>
</body>

</html>